<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history</title>

    {load href="__libs__/jquery/jquery.min.js"/}
    {load href="__libs__/layer/layer.js"/}
    {load href="__libs__/layui/layui.js"/}
    {load href="__libs__/jquery/jquery.cookie.js"/}

    {load href="__libs__/layui/css/layui.css"/}
    {load href="__style__/admin/index.css"/}
    {load href="__style__/admin/index_me.css"/}

    <style>
        .outer-left {
            float: left;
            width: 500px;
            position: relative;
            left: 60px;
            top: 20px;
            clear: both;
            font-size: 14px;
        }

        .outer-right {
            float: right;
            width: 500px;
            position: relative;
            right: 60px;
            clear: both;
            font-size: 14px;
        }
    </style>

<body>

<div id="wrap" style="width: 100%;height:100%;overflow-y: auto;overflow-x: hidden;">
    <ul class="conversation">


    </ul>
</div>
</body>

<script>


    //获取最近历史消息
    function getdata() {

        var avatver, cha;
        var sdata = $.cookie("cu_com");
        if (sdata) {
            var jsondata = $.parseJSON(sdata);
            avatver = jsondata.avatar;
            cha = jsondata.visiter_id;
        }
        var showtime;
        var curentdata = new Date();
        var time = curentdata.toLocaleDateString();
        var cmin = curentdata.getMinutes();
        if ($.cookie("allhid") != "") {
            var cid = $.cookie("allhid");
        } else {
            var cid = '';
        }


        $.ajax({
            url: "/admin/set/history",
            type: "post",
            data: {
                visiter_id: cha, hid: cid
            },
            dataType: 'json',
            success: function (res) {
                // alert(res);
                if (res.code == 0) {

                    var se = $("#chatmsg_submit").attr("name");
                    var str = "";
                    var data = res.data;
                    var pic = $("#se_avatar").attr('src');

                    $.each(data, function (k, v) {
                        if (getdata.puttime) {
                            if ((v.timestamp - getdata.puttime) > 60) {
                                var myDate = new Date(v.timestamp * 1000);
                                var puttime = myDate.toLocaleDateString();
                                if (puttime == time) {
                                    showtime = myDate.getHours() + ":" + myDate.getMinutes();
                                } else {
                                    showtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate() + " " + myDate.getHours() + ":" + myDate.getMinutes();
                                }

                            } else {

                                showtime = "";
                            }

                        } else {

                            var myDate = new Date(v.timestamp * 1000);
                            var puttime = myDate.toLocaleDateString();
                            if (puttime == time) {
                                showtime = myDate.getHours() + ":" + myDate.getMinutes();

                            } else {

                                showtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate() + " " + myDate.getHours() + ":" + myDate.getMinutes();
                            }
                        }

                        getdata.puttime = v.timestamp;

                        if (v.direction == 'to_visiter') {

                            str += '<li class="chatmsg"><div class="showtime">' + showtime + '</div>';
                            str += '<div class="" style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle cu_pic" src="' + v.avatar + '" width="40px" height="40px"></div>';
                            str += "<div class='outer-right'><span style='color: #d2d2d2;position:  absolute;right: -56px;top: -26px;'>管理员wolive</span><div class='service'>";
                            str += "<pre>" + v.content + "</pre>";
                            str += "</div></div>";
                            str += "</li>";

                        } else {

                            str += '<li class="chatmsg"><div class="showtime">' + showtime + '</div><div class="" style="position: absolute;left:3px;">';
                            str += '<p style="color: #d2d2d2;">' + v.name + '</p><img class="my-circle  se_pic" src="' + v.avatar + '" width="40px" height="40px"></div>';
                            str += "<div class='outer-left'><div class='customer'>";
                            str += "<pre>" + v.content + "</pre>";
                            str += "</div></div>";
                            str += "</li>";
                        }
                    });

                    var div = document.getElementById("wrap");
                    if ($.cookie("allhid") == "") {

                        $(".conversation").append(str);

                        if (div) {
                            div.scrollTop = div.scrollHeight;
                        }
                    } else {
                        $(".conversation").prepend(str);
                        if (res.data.length <= 2) {

                            $("#top_div").remove();
                            $(".conversation").prepend("<div id='top_div' class='showtime'>已没有数据</div>");
                            if (div) {
                                div.scrollTop = 0;
                            }

                        } else {
                            if (div) {
                                div.scrollTop = div.scrollHeight / 3;
                            }
                        }
                    }
                    if (res.data.length > 0) {
                        $.cookie("allhid", data[0]['cid']);

                    }
                }
            }
        });
    }


    document.getElementById("wrap").onscroll = function () {
        var t = document.getElementById("wrap").scrollTop;
        if (t == 0) {

            var sdata = $.cookie("cu_com");
            var jsondata = $.parseJSON(sdata);
            var chas = jsondata.visiter_id;
            if ($.cookie("hid") != "") {
                getdata(chas);
            }
        }
    }


    function init() {

        $.cookie('allhid', '');
        getdata();

    }

    //图片放大预览
    /*function getbig(obj) {
        var src = $(obj).attr('src');

        var nWidth = obj.naturalWidth;
        var nHeight = obj.naturalHeight;
        var rate=nWidth/nHeight;

        var maxwidth =window.innerWidth-30;
        var maxheight=window.innerHeight-30;

        var height = maxheight > nHeight ? nHeight : maxheight;
        var width = maxwidth > nWidth ? nWidth : maxwidth;

        if (maxheight > nHeight && maxwidth > nWidth) {
            height = nHeight;
            width = nWidth;
        } else {
            if (nHeight - maxheight > nWidth - maxwidth) {
                height = maxheight;
                width = height*rate;
            } else {
                width = maxwidth;
                height = width/rate;
            }
        }

        layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            area: [width+'px',height+'px'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            scrollbar:false,
            content: "<img src='" + src + "' style='width:100%;height:100%;'>"
        });
    }*/


    window.onload = init();

</script>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe.
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides.
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<!-- Core CSS file -->
<link rel="stylesheet" href="/assets/libs/photoswipe/photoswipe.css">

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite,
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="/assets/libs/photoswipe/default-skin.css">

<!-- Core JS file -->
<script src="/assets/libs/photoswipe/photoswipe.min.js"></script>

<!-- UI JS file -->
<script src="/assets/libs/photoswipe/photoswipe-ui-default.min.js"></script>

</html>
